Zvládnutie CSS View Transitions: Hĺbkový pohľad na štýlovanie pseudo-elementov

V neustále sa vyvíjajúcom svete webového vývoja je snaha o bezproblémový, plynulý a pútavý používateľský zážitok konštantou. Vývojári sa roky snažili preklenúť priepasť medzi webom a natívnymi aplikáciami, najmä pokiaľ ide o plynulosť prechodov medzi stránkami. Tradičná webová navigácia často vedie k drsnému, úplnému znovunačítaniu stránky – prázdnej bielej obrazovke, ktorá na okamih preruší ponorenie používateľa. Jednostránkové aplikácie (SPA) to zmiernili, ale vytváranie vlastných, zmysluplných prechodov zostalo zložitou a často krehkou úlohou, silne závislou od JavaScriptových knižníc a zložitej správy stavu.

Prichádza CSS View Transitions API, prelomová technológia pripravená zrevolucionizovať spôsob, akým narábame so zmenami v UI na webe. Toto výkonné API poskytuje jednoduchý, no neuveriteľne flexibilný mechanizmus na animovanie medzi rôznymi stavmi DOM, vďaka čomu je jednoduchšie ako kedykoľvek predtým vytvárať vyladené, aplikáciám podobné zážitky, ktoré používatelia očakávajú. Srdcom sily tohto API je sada nových CSS pseudo-elementov. Nie sú to vaše typické selektory; sú to dynamické, dočasné prvky generované prehliadačom, ktoré vám poskytujú detailnú kontrolu nad každou fázou prechodu. Táto príručka vás prevedie hĺbkovým ponorom do tohto stromu pseudo-elementov a preskúma, ako štýlovať každý komponent na vytvorenie ohromujúcich, výkonných a prístupných animácií pre globálne publikum.

Anatómia View Transition

Predtým, ako môžeme štýlovať prechod, musíme pochopiť, čo sa deje pod kapotou, keď sa spustí. Keď iniciujete prechod zobrazenia (napríklad volaním document.startViewTransition()), prehliadač vykoná sériu krokov:

• Zachytenie starého stavu: Prehliadač urobí „snímku obrazovky“ aktuálneho stavu stránky.
• Aktualizácia DOM: Váš kód potom vykoná zmeny v DOM (napr. prechod na nové zobrazenie, pridanie alebo odstránenie prvkov).
• Zachytenie nového stavu: Po dokončení aktualizácie DOM prehliadač urobí snímku obrazovky nového stavu.
• Vytvorenie stromu pseudo-elementov: Prehliadač potom vytvorí dočasný strom pseudo-elementov v prekrytí stránky. Tento strom obsahuje zachytené obrázky starého a nového stavu.
• Animácia: Na tieto pseudo-elementy sa aplikujú CSS animácie, čím sa vytvorí plynulý prechod zo starého stavu do nového. Predvoleným je jednoduché prelínanie (cross-fade).
• Upratanie: Po dokončení animácií sa strom pseudo-elementov odstráni a používateľ môže interagovať s novým, živým DOM.

Kľúčom k prispôsobeniu je tento dočasný strom pseudo-elementov. Predstavte si ho ako sadu vrstiev v dizajnovom nástroji, dočasne umiestnenú na vrchu vašej stránky. Nad týmito vrstvami máte úplnú kontrolu pomocou CSS. Tu je štruktúra, s ktorou budete pracovať:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Poďme si rozobrať, čo každý z týchto pseudo-elementov predstavuje.

Obsadenie pseudo-elementov

::view-transition: Toto je koreň celej štruktúry. Je to jediný prvok, ktorý vypĺňa viewport a nachádza sa nad všetkým ostatným obsahom stránky. Slúži ako kontajner pre všetky prechádzajúce skupiny a je skvelým miestom na nastavenie celkových vlastností prechodu, ako je trvanie alebo časová funkcia.

::view-transition-group(*): Pre každý samostatný prechádzajúci prvok (identifikovaný CSS vlastnosťou view-transition-name) sa vytvorí skupina. Tento pseudo-element je zodpovedný za animáciu pozície a veľkosti svojho obsahu. Ak máte kartu, ktorá sa presúva z jednej strany obrazovky na druhú, je to práve ::view-transition-group, ktorý sa v skutočnosti pohybuje.

::view-transition-image-pair(*): Tento prvok, vnorený v skupine, slúži ako kontajner a orezávacia maska pre staré a nové zobrazenie. Jeho primárnou úlohou je udržiavať efekty ako border-radius alebo transform počas animácie a riadiť predvolenú prelínaciu animáciu.

::view-transition-old(*): Toto predstavuje „snímku obrazovky“ alebo vykreslené zobrazenie prvku v jeho starom stave (pred zmenou DOM). Štandardne sa animuje z opacity: 1 na opacity: 0.

::view-transition-new(*): Toto predstavuje „snímku obrazovky“ alebo vykreslené zobrazenie prvku v jeho novom stave (po zmene DOM). Štandardne sa animuje z opacity: 0 na opacity: 1.

Koreň: Štýlovanie pseudo-elementu ::view-transition

Pseudo-element ::view-transition je plátno, na ktorom je namaľovaná celá vaša animácia. Ako kontajner najvyššej úrovne je ideálnym miestom na definovanie vlastností, ktoré by sa mali vzťahovať globálne на celý prechod. Prehliadač štandardne poskytuje sadu animácií, ale môžete ich ľahko prepísať.

Napríklad predvolený prechod je prelínanie (cross-fade), ktoré trvá 250 milisekúnd. Ak to chcete zmeniť pre každý prechod na vašej stránke, môžete zacieliť na koreňový pseudo-element:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

Toto jednoduché pravidlo teraz spôsobí, že všetky predvolené prelínania stránok trvajú dvakrát dlhšie a používajú krivku 'ease-in-out', čo im dodáva mierne odlišný pocit. Hoci tu môžete aplikovať zložité animácie, vo všeobecnosti je najlepšie použiť ho na definovanie univerzálneho časovania a zrýchlenia, pričom detailnejšiu choreografiu necháte na špecifickejšie pseudo-elementy.

Zoskupovanie a pomenovanie: Sila `view-transition-name`

Bez akejkoľvek ďalšej práce poskytuje View Transition API prelínanie pre celú stránku. Toto je riešené jedinou skupinou pseudo-elementov pre koreň. Skutočná sila API sa odomkne, keď chcete prechádzať špecifickými, jednotlivými prvkami medzi stavmi. Napríklad, plynulé zväčšenie a presunutie miniatúry produktu na stránke so zoznamom do pozície hlavného obrázka produktu na stránke s detailmi.

Aby ste prehliadaču povedali, že dva prvky v rôznych stavoch DOM sú koncepčne rovnaké, použijete CSS vlastnosť view-transition-name. Táto vlastnosť musí byť aplikovaná na počiatočný aj koncový prvok.

/* V CSS stránky so zoznamom */

.product-thumbnail {

  view-transition-name: product-image;

}

/* V CSS stránky s detailom */

.main-product-image {

  view-transition-name: product-image;

}

Tým, že obom prvkom dáte rovnaké jedinečné meno ('product-image' v tomto prípade), inštruujete prehliadač: „Namiesto toho, aby si len stlmil starú stránku a zjavil novú, vytvor špeciálny prechod pre tento konkrétny prvok.“ Prehliadač teraz vygeneruje dedikovanú ::view-transition-group(product-image) na samostatné riadenie jeho animácie od prelínania koreňa. Toto je základný koncept, ktorý umožňuje populárny efekt prechodu „morfovania“ alebo „zdieľaného prvku“.

Dôležitá poznámka: V ktoromkoľvek danom okamihu počas prechodu musí byť view-transition-name jedinečný. Nemôžete mať dva viditeľné prvky s rovnakým menom súčasne.

Hĺbkové štýlovanie: Základné pseudo-elementy

Keď máme naše prvky pomenované, môžeme sa ponoriť do štýlovania špecifických pseudo-elementov, ktoré pre ne prehliadač generuje. Tu môžete vytvárať skutočne vlastné a expresívne animácie.

`::view-transition-group(name)`: Hýbateľ

Jedinou zodpovednosťou skupiny je prejsť z veľkosti a pozície starého prvku na veľkosť a pozíciu nového prvku. Neobsahuje vizuálny vzhľad samotného obsahu, iba jeho ohraničujúci rámec. Predstavte si ho ako pohyblivý rám.

Štandardne prehliadač animuje jeho vlastnosti transform a width/height. Môžete to prepísať, aby ste vytvorili rôzne efekty. Napríklad by ste mohli pridať oblúk do jeho pohybu animovaním po zakrivenej dráhe, alebo ho nechať zväčšovať a zmenšovať počas jeho cesty.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

V tomto príklade aplikujeme špecifickú funkciu zrýchlenia iba na pohyb obrázka produktu, čím pôsobí dynamickejšie a fyzickejšie, bez toho, aby to ovplyvnilo predvolené prelínanie zvyšku stránky.

`::view-transition-image-pair(name)`: Orezávač a stmievač

Vnorený v pohybujúcej sa skupine, image-pair drží staré a nové zobrazenie. Funguje ako orezávacia maska, takže ak má váš prvok border-radius, image-pair zabezpečí, že obsah zostane orezaný týmto polomerom počas celej animácie veľkosti a pozície. Jeho ďalšou hlavnou úlohou je organizovať predvolené prelínanie medzi starým a novým obsahom.

Tento prvok môžete chcieť štýlovať, aby ste zabezpečili vizuálnu konzistenciu alebo vytvorili pokročilejšie efekty. Kľúčovou vlastnosťou, ktorú treba zvážiť, je isolation: isolate. Toto je kľúčové, ak plánujete použiť pokročilé efekty mix-blend-mode na potomkoch (starom a novom), pretože to vytvára nový kontext skladania a zabraňuje prelínaniu ovplyvňovať prvky mimo skupiny prechodu.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` a `::view-transition-new(name)`: Hviezdy predstavenia

Toto sú pseudo-elementy, ktoré predstavujú vizuálny vzhľad vášho prvku pred a po zmene DOM. Tu sa bude odohrávať väčšina vašej vlastnej animačnej práce. Štandardne prehliadač na nich spúšťa jednoduchú prelínaciu animáciu pomocou opacity a mix-blend-mode. Ak chcete vytvoriť vlastnú animáciu, musíte najprv vypnúť tú predvolenú.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Keď je predvolená animácia vypnutá, môžete aplikovať svoju vlastnú. Pozrime sa na niekoľko bežných vzorov.

Vlastná animácia: Posun

Namiesto prelínania necháme obsah kontajnera posunúť sa dovnútra. Napríklad pri navigácii medzi článkami chceme, aby sa text nového článku posunul zprava, zatiaľ čo starý text sa posunie doľava.

Najprv definujeme kľúčové snímky (keyframes):

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Teraz aplikujeme tieto animácie na staré a nové pseudo-elementy pre pomenovaný prvok 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Vlastná animácia: 3D otočenie

Pre dramatickejší efekt môžete vytvoriť 3D otočenie karty. To si vyžaduje animovanie vlastnosti transform pomocou rotateY a tiež správu backface-visibility.

/* Skupina potrebuje 3D kontext */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* Aj image-pair musí zachovať 3D kontext */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Staré zobrazenie sa otáča z 0 na -180 stupňov */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Nové zobrazenie sa otáča z 180 na 0 stupňov */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Praktické príklady a pokročilé techniky

Teória je užitočná, ale v praktickej aplikácii sa učíme najviac. Prejdime si niekoľko bežných scenárov a ako ich riešiť pomocou pseudo-elementov prechodov zobrazenia.

Príklad: „Morfujúca“ miniatúra karty

Toto je klasický prechod zdieľaného prvku. Predstavte si galériu používateľských profilov. Každý profil je karta s avatarom. Keď kliknete na kartu, prejdete na stránku s detailmi, kde je ten istý avatar zobrazený na poprednom mieste hore.

Krok 1: Priradenie mien

Na stránke galérie dostane obrázok avatara meno. Meno by malo byť jedinečné pre každú kartu, napríklad na základe ID používateľa.

/* V gallery-item.css */

.card-avatar { view-transition-name: avatar-user-123; }

Na stránke s detailmi profilu dostane veľký avatar v hlavičke presne to isté meno.

/* V profile-page.css */

.profile-header-avatar { view-transition-name: avatar-user-123; }

Krok 2: Prispôsobenie animácie

Prehliadač štandardne posunie a zmení veľkosť avatara, ale tiež prelnie obsah. Ak je obrázok identický, toto prelínanie je zbytočné a môže spôsobiť mierne blikanie. Môžeme ho vypnúť.

/* Hviezdička (*) tu slúži ako zástupný znak pre akúkoľvek pomenovanú skupinu */

::view-transition-image-pair(*) {

  /* Vypnutie predvoleného prelínania */

  animation-duration: 0s;

}

Počkať, ak vypneme prelínanie, ako sa obsah prepne? Pri zdieľaných prvkoch, kde sú staré a nové zobrazenia identické, je prehliadač dostatočne inteligentný na to, aby použil len jedno zobrazenie pre celý prechod. `image-pair` v podstate drží iba jeden obrázok, takže vypnutie prelínania jednoducho odhalí túto optimalizáciu. Pre prvky, kde sa obsah skutočne mení, by ste potrebovali vlastnú animáciu namiesto predvoleného prelínania.

Riešenie zmien pomeru strán

Bežná výzva nastáva, keď prechádzajúci prvok mení svoj pomer strán. Napríklad, miniatúra 16:9 na stránke so zoznamom sa môže premeniť na štvorcový avatar 1:1 na stránke s detailmi. Predvolené správanie prehliadača je animovať šírku a výšku nezávisle, čo vedie k tomu, že obrázok počas prechodu vyzerá stlačený alebo natiahnutý.

Riešenie je elegantné. Necháme ::view-transition-group, aby sa postaral o zmenu veľkosti a pozície, ale prepíšeme štýlovanie starých a nových obrázkov v ňom.

Cieľom je, aby staré a nové „snímky obrazovky“ vyplnili svoj kontajner bez deformácie. Môžeme to urobiť nastavením ich šírky a výšky na 100% a povolením, aby sa predvolená vlastnosť object-fit prehliadača (ktorá je zdedená z pôvodného prvku) postarala o správne škálovanie.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Zabránenie deformácii vyplnením kontajnera */

  width: 100%;

  height: 100%;

  

  /* Prepísanie predvoleného prelínania, aby bol efekt jasne viditeľný */

  animation: none;

}

S týmto CSS bude `image-pair` plynule animovať svoj pomer strán a obrázky vo vnútri budú správne orezané alebo s čiernymi pruhmi (v závislosti od ich hodnoty `object-fit`), rovnako ako by boli v normálnom kontajneri. Potom môžete na túto opravenú geometriu pridať svoje vlastné animácie, napríklad prelínanie.

Ladenie a podpora prehliadačov

Štýlovanie prvkov, ktoré existujú len zlomok sekundy, môže byť zložité. Našťastie, moderné prehliadače poskytujú na to vynikajúce vývojárske nástroje. V nástrojoch pre vývojárov v Chrome alebo Edge môžete prejsť do panelu „Animations“ a keď spustíte prechod zobrazenia, môžete ho pozastaviť. S pozastavenou animáciou potom môžete použiť panel „Elements“ na preskúmanie celého stromu pseudo-elementov `::view-transition` rovnako ako akejkoľvek inej časti DOM. Môžete vidieť aplikované štýly a dokonca ich meniť v reálnom čase, aby ste svoje animácie zdokonalili.

Koncom roka 2023 je View Transitions API podporované v prehliadačoch založených na Chromiu (Chrome, Edge, Opera). Implementácie prebiehajú pre Firefox a Safari. To z neho robí ideálneho kandidáta na postupné vylepšovanie (progressive enhancement). Používatelia s podporovanými prehliadačmi získajú úžasný, vylepšený zážitok, zatiaľ čo používatelia na iných prehliadačoch dostanú štandardnú, okamžitú navigáciu. Podporu môžete skontrolovať v CSS:

@supports (view-transition: none) {

  /* Všetky štýly view-transition patria sem */

  ::view-transition-old(my-element) { ... }

}

Osvedčené postupy pre globálne publikum

Pri implementácii animácií je dôležité brať do úvahy rozmanitú škálu používateľov a zariadení na celom svete.

Výkon: Animácie by mali byť rýchle a plynulé. Držte sa animovania CSS vlastností, ktorých spracovanie je pre prehliadač lacné, predovšetkým transform a opacity. Animovanie vlastností ako width, height alebo margin môže spustiť prepočítavanie rozloženia pri každom snímku, čo vedie k trhaniu a zlému zážitku, najmä na menej výkonných zariadeniach.

Prístupnosť: Niektorí používatelia trpia kinetózou alebo nepohodlím z animácií. Všetky hlavné operačné systémy poskytujú používateľskú preferenciu na zníženie pohybu. Musíme to rešpektovať. Mediálny dotaz prefers-reduced-motion vám umožňuje vypnúť alebo zjednodušiť vaše animácie pre týchto používateľov.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Preskočiť všetky vlastné animácie a použiť rýchle, jednoduché prelínanie */

    animation: none !important;

  }

}

Používateľský zážitok (UX): Dobré prechody sú účelné. Mali by viesť pozornosť používateľa a poskytovať kontext o zmene, ktorá sa deje v UI. Príliš pomalá animácia môže spôsobiť, že aplikácia pôsobí spomalene, zatiaľ čo príliš okázalá môže byť rušivá. Snažte sa o trvanie prechodu medzi 200ms a 500ms. Cieľom je, aby animácia bola viac cítená, ako videná.

Záver: Budúcnosť je plynulá

CSS View Transitions API, a najmä jeho výkonný strom pseudo-elementov, predstavuje monumentálny skok vpred pre webové používateľské rozhrania. Poskytuje vývojárom natívnu, výkonnú a vysoko prispôsobiteľnú sadu nástrojov na vytváranie plynulých, stavových prechodov, ktoré boli kedysi výhradnou doménou natívnych aplikácií. Porozumením úloh ::view-transition, ::view-transition-group a párov obrázkov old/new sa môžete posunúť za jednoduché prelínania a choreografovať zložité, zmysluplné animácie, ktoré zvyšujú použiteľnosť a tešia používateľov.

Ako sa podpora prehliadačov rozširuje, toto API sa stane nevyhnutnou súčasťou arzenálu moderného front-end vývojára. Prijatím jeho schopností a dodržiavaním osvedčených postupov pre výkon a prístupnosť môžeme budovať web, ktorý je nielen funkčnejší, ale aj krajší a intuitívnejší pre všetkých a všade.